v-for循环为什么一定要绑定key?

标签:2024-05-19 17:39:08

vue中列表循环需加:key="唯一标识" 唯一标识可以是item里面id index等,因为vue组件高度复用增加Key可以标识组件的唯一性,为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM

1、vue更新已渲染过的元素时,默认使用就地复用策略(如果该元素dom未修改,则复用之前的元素,否则重新渲染这一项)。

2、key的作用是唯一标识组件元素,辅助判断新旧vdom节点在逻辑上是不是同一个对象,是否有更新

vue是通过比对组件自身新旧vdom进行更新的。

key的作用是唯一标识组件元素,辅助判断新旧vdom节点在逻辑上是不是同一个对象。

比如说数组里插入了一项,这就是很经典的例子。当没有key时,在某个节点位置插入一个元素,vue会认为不是同一个虚拟dom,会进行更新。如果key唯一标志了组件元素就不回出现这种问题。

提高效率,如果我们给列表增加了一条数据,页面只渲染了这数据

总结:

1、key的主要作用就是用来提高渲染性能

2、key属性可以避免数据混乱的情况出现

注意:

尽量不要使用索引值index作key值,一定要用唯一标识的值,如id等。因为若用数组索引index为key,当向数组中指定位置插入一个新元素后,因为这时候会重新更新index索引,对应着后面的虚拟DOM的key值全部更新了,这个时候还是会做不必要的更新,就像没有加key一样,因此index虽然能够解决key不冲突的问题,但是并不能解决复用的情况。如果是静态数据,用索引号index做key值是没有问题的。

原文出处:http://www.dongblog.com/notes/100.html
来源:博客网 转载请注明出处!

活跃用户

木野狐
Ta还没有签名
lyyyyy
Ta还没有签名
释禅心
Ta还没有签名
24k.纯帅~
Ta还没有签名

友情链接


Warning: Smarty error: unable to read resource: "../../../templates/default/./common/foot/footer_index.htm" in /usr/home/hyu3925200001/htdocs/common/smarty/Smarty.class.php on line 1093

Warning: Smarty error: unable to read resource: "../../../templates/default/./common/foot/footer_index.htm" in /usr/home/hyu3925200001/htdocs/common/smarty/Smarty.class.php on line 1093